var columnHeight = new Array;  // 每列的高度
var windowWidth = document.documentElement.clientWidth;   // 浏览器宽度
var windowHeight = document.documentElement.clientHeight;   // 浏览器高度
var dataIndex = 0; //遍历data数组需要
var data = [{
  "src": "./img/img17.jpg",
  "desc": "coffee"
  },{
  "src": "./img/img18.jpg",
  "desc": "bread"
  },{
  "src": "./img/img19.jpg",
  "desc": "map"
  },{
  "src": "./img/img20.jpg",
  "desc": "me"
  },{
  "src": "./img/img21.jpg",
  "desc": "talk"
  },{
  "src": "./img/img22.jpg",
  "desc": "oneday"
  },{
  "src": "./img/img23.jpg",
  "desc": "水母 Jellyfish"
  },{
  "src": "./img/img24.jpg",
  "desc": "firework"
  },{
  "src": "./img/img25.jpg",
  "desc": "moon"
  },{
  "src": "./img/img26.jpg",
  "desc": "city"
  },{
  "src": "./img/img27.jpg",
  "desc": "surfing"
  },{
  "src": "./img/img28.jpg",
  "desc": "boat"
  },{
  "src": "./img/img29.jpg",
  "desc": "sea"
  },{
  "src": "./img/img30.jpg",
  "desc": "bench"
  },{
  "src": "./img/img31.jpg",
  "desc": "mount"
  }];
// var dataIndex = 0;
function indexMinHeight (minHeight, columnHeight) {
  for (var j = 0; j < columnHeight.length; j++) {
    if (minHeight == columnHeight[j]) {
      return j;
    }
  }
}

// 设置css
function setCss (div, left, top) {
  div.style.position = 'absolute';
  div.style.left = left + 'px';
  div.style.top = top + 'px';
}

function fade(div){
  div.style.opacity = 0;
  var speed = 0.1;
  var timer = null;
  timer = setInterval(function () {
    speed += speed;
    div.style.opacity = speed;
    if (div.style.opacity >= 1){
      div.style.opacity = '';
      clearInterval(timer);
    }
  }, 200);
}

function showInit(box, items, isFirst){
    // 一个小div的宽 offsetWidth 不计算border
  var itemWidth = items[0].offsetWidth + 20;
  var columnNum = Math.floor(windowWidth / itemWidth);
  box.style.width = columnNum * itemWidth + 'px';

  // 最矮的一列需要添加新的图片
  if (isFirst) {
    for (var i = 0; i < items.length; i++) {
      // 得到 第一行中 每一列的高度
      if (i < columnNum) {
        columnHeight[i] = items[i].offsetHeight + 20;
        // console.log(columnHeight[i]);
      } else {
          // 获取数组中最小的值
          var minHeight = Math.min.apply(null, columnHeight);
          // 找出高度最小的一列  的index
          var minIndex = indexMinHeight(minHeight, columnHeight);
          // 设置除第一行外的其他  div 位置
          setCss(items[i], minIndex * itemWidth, minHeight)
          // 更新 columnHeight[最小高度index]
          columnHeight[minIndex] += items[i].offsetHeight + 20;
        }
    }
  }
  else {
    // 获取数组中最小的值
    var minHeight = Math.min.apply(null, columnHeight);
    // 找出高度最小的一列  的index
    var minIndex = indexMinHeight(minHeight, columnHeight);
    // 设置除第一行外的其他  div 位置
    setCss(items[items.length - 1], minIndex * itemWidth, minHeight);
    // 更新 columnHeight[最小高度index]
    columnHeight[minIndex] += items[items.length - 1].offsetHeight + 20;
    fade(items[items.length - 1]);
  }
  return columnNum;
}

// 需要加载新图片吗
function toAppend () {
  var box = document.getElementById("waterfall");
  var items = box.getElementsByTagName("div");
  var lastItemTop = items[items.length - 1].offsetTop;
  var lastItemHeight = items[items.length - 1].offsetHeight + 20;
  var scrollTop = document.documentElement.scrollTop;
  // console.log(scrollTop);
  // console.log((windowHeight + scrollTop) > (lastItemTop + lastItemHeight) ? true : false);
  return (windowHeight + scrollTop) > (lastItemTop + lastItemHeight) ? true : false;
}

function appendItem() {
  var box = document.getElementById("waterfall");
  // 插入新的div
  // var newItem = '<div class="item"><a href="http://www.baidu.com"><img src="./img/img3.jpg"/><span>新的div</span></a></div>';
  var newItem = '<div class="item"><a href="http://www.baidu.com"><img src=" '+ data[dataIndex].src + ' "/><span> '  + data[dataIndex].desc +  '</span></a></div>';

  box.insertAdjacentHTML("beforeend", newItem);
  dataIndex++;
  if (dataIndex == data.length) {
    dataIndex = 0;
  } 
  box = document.getElementById("waterfall");
  var items = box.getElementsByTagName("div");
  showInit(box, items, false);
}

window.onload = function () {
  var box = document.getElementById("waterfall");
  var items = box.getElementsByTagName("div");
  var cols = showInit(box, items, true);

  // 追加
  var scrolled;
  var scrollTop;
  var scrollTop_lastTime = 0;
  window.onscroll = function () {
    // 获取最新的滚轮滑动距离
    scrollTop = document.documentElement.scrollTop;
    console.log(scrollTop);
    scrolled = scrollTop > scrollTop_lastTime ? true : false;
    //向下滚  true 向上滚 false
  };

  setInterval(function () {
    // 向下滚并且滚到底部  需要更新
    if (toAppend && scrolled) {
      scrolled = false;
      scrollTop_lastTime = document.documentElement.scrollTop;
      // 更新
      for (var k = 0;  k < cols + 2; k++) {
        appendItem();
      }
    }
  }, 800);
}